{#
 This Source Code Form is subject to the terms of the Mozilla Public
 License, v. 2.0. If a copy of the MPL was not distributed with this
 file, You can obtain one at https://mozilla.org/MPL/2.0/.
#}

{% from "macros.html" import google_play_button, fxa_email_form with context %}
{% from "macros-protocol.html" import split with context %}

{% extends "firefox/base/base-protocol.html" %}

{% set show_firefox_app_store_banner = switch('firefox-app-store-banner') %}
{% set android_url = play_store_url('firefox', 'firefox-browsers-mobile') %}
{% set ios_url = app_store_url('firefox', 'firefox-browsers-mobile') %}
{% set referrals = '?utm_source=www.mozilla.org&utm_medium=referral&utm_campaign=firefox-mobile' %}
{% set _entrypoint = 'mozilla.org-firefox-mobile' %}

{% block page_title %}{{ ftl('browsers-mobile-firefox-mobile-browsers-put') }}{% endblock %}
{% block page_desc %}{{ ftl('browsers-mobile-overview-of-all-mobile') }}{% endblock %}

{% block body_class %}{{ super() }} mobile-overview{% endblock %}

{% block page_css %}
  {{ css_bundle('protocol-split') }}
  {{ css_bundle('protocol-emphasis-box')}}
  {{ css_bundle('firefox-browsers-products') }}

  {% if show_firefox_app_store_banner %}
    {{ css_bundle('firefox-app-store-banner') }}
  {% endif %}
{% endblock %}

{% block page_banner %}
  {% if show_firefox_app_store_banner %}
    {% include 'includes/banners/mobile/firefox-app-store.html' %}
  {% endif %}
{% endblock %}

{% block sub_navigation %}
  {% include 'firefox/includes/sub-nav-firefox.html' %}
{% endblock %}

{% block content %}
<main>
  {% call split(
    image=resp_img('img/firefox/browsers/hero-500.jpg',
      srcset={
        'img/firefox/browsers/hero-500.jpg': '500w',
        'img/firefox/browsers/hero-700.jpg': '700w',
        'img/firefox/browsers/hero-900.jpg': '900w',
        'img/firefox/browsers/hero-1100.jpg': '1100w',
        'img/firefox/browsers/hero-1300.jpg': '1300w',
      },
      sizes={
        '(min-width: 768px)': 'calc(50vw - 192px)',
        'default': 'calc(100vw - 48px)'
      },
      optional_attributes={
        'class': 'mzp-c-split-media-asset',
        'height': '420',
        'width': '680'
      }
    ),
    block_class='mzp-has-media-hide mzp-l-split-center-on-sm-md',
    body_class='mzp-l-v-center',
    media_class='mzp-l-fit-flush mzp-l-constrain-height'
  ) %}
    <div class="mzp-c-logo mzp-t-logo-lg mzp-t-product-firefox"></div>
    <h1>{{ ftl('browsers-mobile-go-your-own-way') }}</h1>
    <p>{{ ftl('browsers-mobile-firefox-mobile-adapts-to-you') }}</p>
  {% endcall %}

  <section class="mzp-l-content c-landing-grid">
    <div class="c-landing-grid-item">
      {{ resp_img(
        url='img/firefox/browsers/mobile/index/firefox-android.png',
        srcset={
          'img/firefox/browsers/mobile/index/firefox-android-high-res.png': '2x'
        },
        optional_attributes={
          'class': 'c-landing-grid-img',
          'width': '350',
          'height': '263'
        }
      ) }}
      <h2 class="c-landing-grid-title"><a href="{{ url('firefox.browsers.mobile.android') }}" data-cta-text="Firefox for Android">{{ ftl('browsers-mobile-firefox-for-android') }}</a></h2>
      <p>{{ ftl('browsers-mobile-infinitely-customizable-private') }}</p>

      <p id="android-download">
        <a class="mzp-c-cta-link ga-product-download" href="{{ android_url }}" rel="external noopener" data-cta-text="Download (Android)" data-cta-type="firefox_mobile">{{ ftl('browsers-mobile-download') }}</a>
      </p>

      <p><a class="mzp-c-cta-link ga-product-download" href="{{ url('firefox.browsers.mobile.android') }}" data-cta-text="Android Learn More">{{ ftl('ui-learn-more') }}</a></p>
    </div>

    <div class="c-landing-grid-item">
      {{ resp_img(
        url='img/firefox/browsers/mobile/index/firefox-ios-v2.jpg',
        srcset={
          'img/firefox/browsers/mobile/index/firefox-ios-high-res-v2.jpg': '2x'
        },
        optional_attributes={
          'class': 'c-landing-grid-img',
          'width': '352',
          'height': '265'
        }
      ) }}
      <h2 class="c-landing-grid-title"><a href="{{ url('firefox.browsers.mobile.ios') }}" data-cta-text="Firefox for iOS">{{ ftl('browsers-mobile-firefox-for-ios') }}</a></h2>
      <p>{{ ftl('browsers-mobile-get-enhanced-tracking-protection') }}</p>

      <p id="ios-download">
        <a class="mzp-c-cta-link ga-product-download" href="{{ ios_url }}" rel="external noopener" data-cta-text="Download (iOS)" data-cta-type="firefox_mobile">{{ ftl('browsers-mobile-download') }}</a>
      </p>

      <p><a class="mzp-c-cta-link ga-product-download" href="{{ url('firefox.browsers.mobile.ios') }}" data-cta-text="iOS Learn More">{{ ftl('ui-learn-more') }}</a></p>
    </div>

    <div class="c-landing-grid-item">
      {{ resp_img(
        url='img/firefox/mobile/firefox-focus.jpg',
        srcset={
          'img/firefox/mobile/firefox-focus-high-res.jpg': '2x'
        },
        optional_attributes={
          'l10n': True,
          'class': 'c-landing-grid-img',
          'width': '350',
          'height': '218'
        }
      ) }}
      <h2 class="c-landing-grid-title"><a href="{{ url('firefox.browsers.mobile.focus') }}" data-cta-text="Firefox Focus">{{ ftl('browsers-mobile-firefox-focus') }}</a></h2>
      <p>{{ ftl('browsers-mobile-looking-for-a-streamlined') }}</p>

      <div id="menu-focus-wrapper"  class="mzp-c-menu-list mzp-t-cta mzp-t-download">
        <h3 class="mzp-c-menu-list-title">{{ ftl('browsers-mobile-download') }}</h3>
        <ul class="mzp-c-menu-list-list" id="menu-mobile">
          <li class="mzp-c-menu-list-item"><a href="{{ play_store_url('focus', 'firefox-browsers-mobile') }}" rel="external noopener" class="ga-product-download" data-cta-text="Download - Android (Focus)" data-cta-type="firefox_focus">{{ ftl('browsers-mobile-android') }}</a></li>
          <li class="mzp-c-menu-list-item"><a href="{{ app_store_url('focus', 'firefox-browsers-mobile') }}" rel="external noopener" class="ga-product-download" data-cta-text="Download - iOS (Focus)" data-cta-type="firefox_focus">{{ ftl('browsers-mobile-ios') }}</a></li>
        </ul>
      </div>

      <p><a class="mzp-c-cta-link" href="{{ url('firefox.browsers.mobile.focus') }}" data-cta-text="Focus Learn More">{{ ftl('ui-learn-more') }}</a></p>
    </div>

  </section>

  <section class="c-browser-compare mzp-l-content mzp-t-content-lg">
    {% call split(
      image=resp_img('img/firefox/browsers/dev.png',
        srcset={ 'img/firefox/browsers/dev-high-res.png': '2x' },
        optional_attributes={ 'class': 'mzp-c-split-media-asset'}
      ),
      block_class='t-compare'
    ) %}
      <h2>{{ ftl('browsers-mobile-see-how-firefox-for-desktop-compare-v2') }}</h2>
      <p class="c-compare-title mzp-has-zap-06">{{ ftl('browsers-mobile-see-how-firefox-for-desktop-strong-v2') }}</p>
      <p><a class="mzp-c-cta-link" href="{{ url('firefox.browsers.compare.index') }}" data-cta-text="Compare">{{ ftl('browsers-mobile-compare') }}</a></p>
    {% endcall %}
  </section>

  {% include 'mozorg/includes/mozilla-account-promo.html' %}

</main>
{% endblock %}

{% block js %}
  {{ js_bundle('fxa_form') }}
  {{ js_bundle('firefox-browsers-products') }}

  {% if show_firefox_app_store_banner %}
    {{ js_bundle('firefox-app-store-banner') }}
  {% endif %}
{% endblock %}
